<template>
  <div id="myChart" :style="{width: '100%', height: '700px' }" class='app-container'></div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      yAxisData: [],
      seriesData1: [],
      seriesData2: []
    }
  },
  async mounted() {
    const resp = await axios.get('http://ip.usts.fun:9529/order/list');
    const countData = resp.data.data
    // console.log(countData)
    var ts = ''

    countData.forEach(i => {
      // console.log(String(i.orderTime))
      var s = String(i.orderTime).substr(0, 10)
      if (s !== ts) {
        ts = s
        this.yAxisData.push(s)
      }
    })

    this.yAxisData.forEach(i => {
      var num1 = 0
      var num2 = 0
      countData.forEach(j => {
        if (i === String(j.orderTime).substr(0, 10)) {
          if (j.checked === 1) ++num1;
          else ++num2
        }
      })
      this.seriesData1.push(num1)
      this.seriesData2.push(num2)
    })
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于刚刚准备好的 DOM 容器，初始化 EChart 实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: '订单统计'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: this.yAxisData
        },
        series: [
          {
            name: '已处理',
            type: 'bar',
            data: this.seriesData1
          },
          {
            name: '未处理',
            type: 'bar',
            data: this.seriesData2
          }
        ],
        dataZoom: [//给x轴设置滚动条
          {
            start:0,//默认为0
            end: 100-1500/31,//默认为100
            type: 'slider',
            maxValueSpan:10,//窗口的大小，显示数据的条数的
            show: true,
            yAxisIndex: [0],
            handleSize: 0,//滑动条的 左右2个滑动条的大小
            showDataShadow: true,//是否显示数据阴影 默认auto
            showDetail: true,//即拖拽时候是否显示详细数值信息 默认true
            realtime:true, //是否实时更新
            filterMode: 'filter',
          },
          //下面这个属性是里面拖到
          {
            type: 'inside',
            show: true,
            yAxisIndex: [0,1],
            start: 1,//默认为1
            end: 100-1500/31,//默认为100
          },
        ],
      });
    }
  }
}
</script>
